/*reset.css*/
*{
	margin: 0;
	padding: 0;
}
img{
	vertical-align: top;
	border: none;
}
a,a:focus{
	outline: none;
}
a:link{
	color: #000;
	text-decoration: none;
}
li{
	list-style: none;
}
/*main.css*/
html,body{
	width: 100%;
}
#container{
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
}
#banner{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}
#banner .imgbox{
	width: 1000%;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
#banner .imgbox li{
	width: 10%;
	float: left;
}
#banner .imgbox li img{
	width: 100%;
}

#banner .point{
	position: absolute;
	bottom: 10px;
	overflow: hidden;
	/*变形定位居中法*/
	/*left: 50%;
	transform: translateX(-50%);*/
	/*定位居中*/
	width: 180px;
	left: 0;
	right: 0;
	margin: auto;
}
#banner .point li{
	width: 22px;
	height: 10px;
	border: 2px solid #ddd;
	border-radius: 4px;
	float: left;
	margin: 5px;
	background-color: rgba(0,0,0,0.3);
	cursor: pointer;
}
#banner .point li:hover,#banner .point .active{
	background-color: darkgray;
}

#banner .btn{
	width: 100%;
	position: absolute;
	left: 0;
	/*定位居中法 垂直居中*/
	height: 60px;
	top: 0;
	bottom: 0;
	margin: auto;
}
#banner .btn a{
	width: 30px;
	text-align: center;
	font:bold 40px/60px simsun;
	color: #DDD;
}
#banner .btn a:first-child{
	float: left;
}
#banner .btn a+a{
	float: right;
}
#banner .btn a:hover{
	background-color: rgba(0,0,0,0.3);
}









